
$(function() {
    $(window).on('resize', function () {
        var $content = $('#larry-tab .layui-tab-content');
        $content.height($(this).height() - 140);
        $content.find('iframe').each(function () {
            $(this).height($content.height());
        });
    }).resize();
})

//生成菜单
var menuItem = Vue.extend({
    name: 'menu-item',
    props: {item: {}},
    template: [
        '<li class="layui-nav-item" >',
        '<a v-if="item.type === 0" href="javascript:;">',
        '<i v-if="item.icon != null" :class="item.icon"></i>',
        '<span>{{item.name}}</span>',
        '<em class="layui-nav-more"></em>',
        '</a>',
        '<dl v-if="item.type === 0" class="layui-nav-child">',
        '<dd v-for="item in item.nodes">',
        '<a v-if="item.type === 1" href="javascript:;" :data-url="item.url"><i v-if="item.icon != null" :class="item.icon" :data-icon="item.icon"></i> <span>{{item.name}}</span></a>',
        '</dd>',
        '</dl>',
        '<a v-if="item.type === 1" href="javascript:;" :data-url="item.url"><i v-if="item.icon != null" :class="item.icon" :data-icon="item.icon"></i> <span>{{item.name}}</span></a>',
        '</li>',
    ].join('')
});

//注册菜单组件
Vue.component('menuItem', menuItem);
isquery=true;
var menu;
//部门结构树
var dept_ztree;
var dept_setting = {
    data: {
        simpleData: {
            enable: true,
            idKey: "deptId",
            pIdKey: "parentId",
            rootPId: -1
        },
        key: {
            url:"nourl"
        },
    },
    callback: {
        //给ztree添加单击事件
        onClick:zTreeOnClick,
    }
};
function zTreeOnClick(event, treeId, treeNode)
{
    //获取光标选中的(selected)
    var selectedNodes =  dept_ztree.getSelectedNodes();
    vm.role.deptId = selectedNodes[0].deptId;
    //根据部门进行数据过滤,iframe 间的postMessage通信
    var iframes = window.document.getElementsByTagName("iframe");
    var iframeWindow ;
    for(var i=0;i<iframes.length;i++)
    {
        iframeWindow = iframes[i].contentWindow;
        switch (iframes[i].src) {
            case "http://localhost:8081/power-design/modules/sys/user.html":
            {
                iframeWindow.postMessage( vm.role.deptId , 'http://localhost:8081/power-design/modules/sys/user.html');
            }
            case "http://localhost:8081/power-design/modules/sys/role.html":
            {
                iframeWindow.postMessage( vm.role.deptId , 'http://localhost:8081/power-design/modules/sys/role.html');
            }
            case "http://localhost:8081/power-design/modules/sys/dict.html":
            {
                iframeWindow.postMessage( vm.role.deptId , 'http://localhost:8081/power-design/modules/sys/dict.html');
            }
            case "http://localhost:8081/power-design/modules/function/emp.html":
            {
                iframeWindow.postMessage( vm.role.deptId , 'http://localhost:8081/power-design/modules/function/emp.html');
            }
            case "http://localhost:8081/power-design/modules/function/emp_browse.html":
            {
                iframeWindow.postMessage( vm.role.deptId , 'http://localhost:8081/power-design/modules/function/emp_browse.html');
            }
            case "http://localhost:8081/power-design/modules/function/emp_add.html":
            {
                iframeWindow.postMessage( vm.role.deptId , 'http://localhost:8081/power-design/modules/function/emp_add.html');
            }
            case "http://localhost:8081/power-design/modules/function/emp_change.html":
            {
                iframeWindow.postMessage( vm.role.deptId , 'http://localhost:8081/power-design/modules/function/emp_change.html');
            }
            case "http://localhost:8081/power-design/modules/function/emp_remove.html":
            {
                iframeWindow.postMessage( vm.role.deptId , 'http://localhost:8081/power-design/modules/function/emp_remove.html');
            }
            case "http://localhost:8081/power-design/modules/function/emp_not.html":
            {
                iframeWindow.postMessage( vm.role.deptId , 'http://localhost:8081/power-design/modules/function/emp_not.html');
            }
            case "http://localhost:8081/power-design/modules/function/emp_exist.html":
            {
                iframeWindow.postMessage( vm.role.deptId , 'http://localhost:8081/power-design/modules/function/emp_exist.html');
            }
            case "http://localhost:8081/power-design/modules/function/emp_status_log.html":
            {
                iframeWindow.postMessage( vm.role.deptId , 'http://localhost:8081/power-design/modules/function/emp_status_log.html');
            }
            case "http://localhost:8081/power-design/modules/function/emp_remove_show.html":
            {
                iframeWindow.postMessage( vm.role.deptId , 'http://localhost:8081/power-design/modules/function/emp_remove_show.html');
            }
            case "http://localhost:8081/power-design/modules/function/emp_change_dept.html":
            {
                iframeWindow.postMessage( vm.role.deptId , 'http://localhost:8081/power-design/modules/function/emp_change_dept.html');
            }
            case "http://localhost:8081/power-design/modules/function/emp_change_office.html":
            {
                iframeWindow.postMessage( vm.role.deptId , 'http://localhost:8081/power-design/modules/function/emp_change_office.html');
            }
            case "http://localhost:8081/power-design/modules/function/emp_change_office_select.html":
            {
                iframeWindow.postMessage( vm.role.deptId , 'http://localhost:8081/power-design/modules/function/emp_change_office_select.html');
            }
            case "http://localhost:8081/power-design/modules/function/emp_info_statistics.html":
            {
                iframeWindow.postMessage( vm.role.deptId , 'http://localhost:8081/power-design/modules/function/emp_info_statistics.html');
            }
            case "http://localhost:8081/power-design/modules/function/emp_data_change.html":
            {
                iframeWindow.postMessage( vm.role.deptId , 'http://localhost:8081/power-design/modules/function/emp_data_change.html');
            }
            case "http://localhost:8081/power-design/modules/function/emp_data_switch.html":
            {
                iframeWindow.postMessage( vm.role.deptId , 'http://localhost:8081/power-design/modules/function/emp_data_switch.html');
            }
        }
    }
}
var vm = new Vue({
    el: '#layui_layout',
    data: {
        user: {},
        menuList: {},//用户菜单ID
        roleMenuList: {},//角色对应菜单Id
        userRole:{},
        password: '',
        newPassword: '',
        navTitle: "首页",
        rolePrimary: {},
        role:{
            roleId:null,
            deptId:null,
        },
        menuCell:1,

    },
    methods: {
        getUser: function () {
            $.getJSON("sys/user/info?_" + $.now(), function (r) {
                vm.user = r.user;
            });
        },
        getUserRole: function () {
            $.getJSON("sys/user/loginUserRole?_" + $.now(), function (r) {
                vm.userRole = r.userRole;
                if(vm.userRole!=null)
                {
                    vm.rolePrimary=r.userRole[0];
                    if(vm.user.userId==1)
                    {
                        vm.getMenuList();
                    }
                    else
                    {
                        vm.getRoleMenuList(r.userRole[0].roleId);
                    }
                   vm.getDept();
                }
            });
        },

       getMenuList: function () {
            $.getJSON("sys/menu/nav", function (r) {
                vm.roleMenuList = r.menuList;
                vm.getRoleMenu(vm.roleMenuList);
            });
        },

        getRoleMenuList: function (roleId) {
            if(vm.user.userId==1)
            {
                $.getJSON("sys/menu/nav", function (r) {
                    vm.roleMenuList = r.menuList;
                    vm.getRoleMenu(vm.roleMenuList);
                });
            }
            else
            {
                $.getJSON("sys/menu/roleNav/"+roleId, function (r) {
                    vm.roleMenuList= r.roleMenuList;
                    vm.getRoleMenu(vm.roleMenuList);

                });
            }
        },
        getRoleMenu: function (data) {
            // 导航菜单的间隔像素
            layui.use('element', function(){
                var element = layui.element();
                var liStr= "";
                // 遍历生成主菜单
                for( var i = 0; i <data.length; i++){
                    // 判断是否存在子菜单
                    if(data[i].nodes!=null&&data[i].nodes.length>0){
                        liStr+="<li class=\"layui-nav-item\"><a class=\"\" href=\"javascript:;\"><i class='layui-icon "+ data[i].icon +"'></i> "+data[i].name+"</a>\n"+
                            "<dl class=\"layui-nav-child\">\n";
                        // 遍历获取子菜单
                        for( var k = 0; k <data[i].nodes.length; k++){
                            liStr+= vm.getChildMenu(data[i].nodes[k],0);
                        }
                        liStr+="</dl></li>";
                    }else{
                        liStr+="<li class=\"layui-nav-item\"><a class=\"\" href=\"javascript:;\" data-url=\""+data[i].url+"\"><i class='layui-icon "+ data[i].icon +"'></i> "+data[i].name+"</a></li>";
                    }
                };
                $("#menu").html("<ul class=\"layui-nav layui-nav-tree\" >\n" +liStr+"</ul>");
                element.init();
                $(document).on('click', '#menu a', function(){
                    vm.updatedAfter();
                });
            });
        },
        // 递归生成子菜单
        getChildMenu:function(subMenu,num) {
            num++;
            var subStr = "";
            if(subMenu.nodes!=null&&subMenu.nodes.length>0){
                subStr+="<dd><ul><li class=\"layui-nav-item\" ><a style=\"text-indent: "+num*vm.menuCell+"em\" class=\"\" href=\"javascript:;\"><i class='layui-icon "+ subMenu.icon +"'></i> "+subMenu.name+"</a>" +
                    "<dl class=\"layui-nav-child\">\n";
                for( var j = 0; j <subMenu.nodes.length; j++){
                    subStr+=vm.getChildMenu(subMenu.nodes[j],num);
                }
                subStr+="</dl></li></ul></dd>";
            }else{
                subStr+="<dd><a style=\"text-indent:"+num*vm.menuCell+"em\" href=\"javascript:;\" data-url=\""+subMenu.url+"\"><i class='layui-icon "+ subMenu.icon +"'></i> "+subMenu.name+"</a></dd>";
            }
            return subStr
        },
        updatedAfter:function(){
            if($("#larry-side .layui-nav-item>a").length==0 || !isquery){
                return;
            }
            isquery=false;
            layui.config({
                base: 'statics/js/',
                autoRefresh:true,
            }).use(['navtab','layer'], function(){
                window.jQuery = window.$ = layui.jquery;
                window.layer = layui.layer;
                var  navtab = layui.navtab({
                    elem: '.larry-tab-box',
                    closed:false,
                });
                $('#menu').children('ul').find('li').each(function () {
                    var $this = $(this);
                    if ($this.find('dl').length > 0) {
                        var $dd = $this.find('dd').each(function () {
                            $(this).on('click', function () {
                                var $a = $(this).children('a');
                                var href = $a.data('url');
                                /* var icon = $a.child.data('icon');*/
                                var title = $a.text();
                                var data = {
                                    href: href,
                                    /*icon: icon,*/
                                    title: title
                                }
                                if(data.href!=null)
                                {
                                    navtab.tabAdd(data);
                                }
                            });
                        });
                    } else {
                        $this.on('click', function () {
                            var $a = $(this).children('a');
                            var href = $a.data('url');
                            var title = $a.text();
                            var data = {
                                href: href,
                                title: title
                            }
                            if(data.href!=null)
                            {
                                navtab.tabAdd(data);
                            }
                        });
                    }
                });
                $('.larry-side-menu').click(function () {
                    var sideWidth = $('#larry-side').width();
                    if (sideWidth === 200) {
                        $('#larry-body').animate({
                            left: '200px'
                        });
                        $('#larry-footer').animate({
                            left: '0'
                        });
                        $('#larry-dept').animate({
                            left: '0'
                        });
                        $('#larry-side').animate({
                            width: '0'
                        });
                    } else {
                        $('#larry-body').animate({
                            left: '400px'
                        });
                        $('#larry-dept').animate({
                            left: '200px'
                        });
                        $('#larry-footer').animate({
                            left: '200px'
                        });
                        $('#larry-side').animate({
                            width: '200px'
                        });
                    }
                });
            });
        },
        switchRole:function (role) {  // 下拉列表的点击事件
            vm.rolePrimary=role;
            vm.getRoleMenuList(role.roleId);
            vm.getDept();
            //应该清除所有navTab组件
            $('ul.layui-tab-title').html("<li class=\"layui-this\" id=\"admin-home\"><i class=\"fa fa-home\"></i><em>首页</em></li>");
            //清除iframe组件
            $('div.layui-show').html("<iframe class=\"larry-iframe\" id=\"larry-iframe\" data-nodeid='0' src=\"main.html\"></iframe>");
        },
        updatePassword: function () {
            layer.open({
                type: 1,
                skin: 'layui-layer-molv',
                title: "修改密码",
                area: ['550px', '270px'],
                shadeClose: false,
                content: jQuery("#passwordLayer"),
                btn: ['修改', '取消'],
                btn1: function (index) {
                    var data = "password=" + vm.password + "&newPassword=" + vm.newPassword;
                    $.ajax({
                        type: "POST",
                        url: "sys/user/password",
                        data: data,
                        dataType: "json",
                        success: function (result) {
                            if (result.code == 0) {
                                layer.close(index);
                                layer.alert('修改成功', function (index) {
                                    location.reload();
                                });
                            } else {
                                layer.alert(result.msg);
                            }
                        }
                    });
                }
            });
        },
        getDept: function(){
            //加载部门树
            $.getJSON("sys/dept/list", function(r){
                dept_ztree = $.fn.zTree.init($("#deptTree"), dept_setting, r);
            })
        },
    },
    created: function () {
        this.getUser();
        this.getUserRole();
    },
});

